<!DOCTYPE html>
<html lang="en">
<html>
<head>
    <title>
        购物车
    </title>
    <meta charset="UTF-8">

    <link rel="stylesheet" type="text/css" href="5_car.css">
</head>
<body>
<div id="five_car" v-cloak>
    <template v-if="list.length">
        <table>
            <thead>
            <tr>
                <th>种类</th>
                <th>序号</th>
                <th>全选<input type="checkbox" :checked="checkboxStatus()" @click="handleSelectAll()"></th>
                <th>商品名称</th>
                <th>商品单价</th>
                <th>购买数量</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <template v-for="(item,index) in list">
                <tr>
                    <td v-if="itemCount(index)>1" :rowspan="itemCount(index)">{{ item.category }}</td>
                </tr>

                <tr v-for="(i,index1) in item.list">
                    <!--                    <template v-for="(i,index) in item.list">-->

                    <td>{{ index1 + 1 }}</td>
                    <td><input type="checkbox" :checked="i.status===1" @click="handleSelect(index,index1)"></td>

                    <td>{{ i.name }}</td>
                    <td>{{ i.price }}</td>
                    <td>{{ i.count }}</td>
                    <td>
                        <button @click="handleReduce(index,index1)" :disabled="i.count===1">-</button>
                        <button @click="handleAdd(index,index1)">+</button>
                        <button @click="handleRemove(index,index1)">移除</button>

                    </td>


                    <!--                    </template>-->
                </tr>
            </template>
            <!--            <tr v-for="(item,index) in list">-->
            <!--                <td>{{ index + 1 }}</td>-->
            <!--                <td><input type="checkbox" :checked="item.status===1" @click="handleSelect(index)"></td>-->

            <!--                <td>{{ item.name }}</td>-->
            <!--                <td>{{ item.price }}</td>-->
            <!--                <td>{{ item.count }}</td>-->
            <!--                <td>-->
            <!--                    <button @click="handleReduce(index)" :disabled="item.count===1">-</button>-->
            <!--                    <button @click="handleAdd(index)">+</button>-->
            <!--                    <button @click="handleRemove(index)">移除</button>-->

            <!--                </td>-->
            <!--            </tr>-->
            </tbody>
        </table>
        <div>
            总价：￥{{ totalPrice }}
        </div>
    </template>
    <div v-else>购物车为空</div>

</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="5_car.js"></script>

</body>
</html>